<!-- 选择 -->
<template>
	<view class="vk-data-input-select">
	<!-- 页面开始 -->
		<u-input
			v-if="showInput"
			type="select"
			:value="textCom"
			:modelValue="textCom"
			:placeholder="placeholder"
			:disabled="disabled"
			:input-align="inputAlign"
			@click="open"
		></u-input>
		<u-action-sheet v-if="componentType === 'sheet'"
			:value="isShow"
			:modelValue="isShow"
			:list="localdata"
			:tips="tips"
			:label-name="props.label"
			@input="onInput"
			@click="_change"
		></u-action-sheet>
		<u-select v-else-if="componentType === 'select'"
			:value="isShow"
			:modelValue="isShow"
			:list="localdata"
			:value-name="props.value"
			:label-name="props.label"
			:default-value="defaultValueCom"
			@input="onInput"
			@confirm="_confirm"
		></u-select>
	<!-- 页面结束 -->
	</view>
</template>

<script>
	export default {
		name: 'vk-data-input-select',
		emits: ["update:modelValue", "input","update:show","change"],
		props: {
			// 表单值
			value:{

			},
			modelValue: {

			},
			// 是否显示input
			showInput: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: false
			},
			// 数据源
			localdata:{
				type: Array,
				default () {
					return []
				}
			},
			// 提示
			placeholder:{
				Type:String,
				default: "请选择"
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 组件类型
			componentType: {
				type: String,
				default: "sheet"
			},
			inputAlign:{
				Type:String
			},
			tips:{
				type: Object,
				default () {
					return {}
				}
			},
			props:{
				Type: Object,
				default() {
					return {
						value:'value',
						label:'label'
					};
				}
			}
		},
		data: function() {
			// 组件创建时,进行数据初始化
			return {
				isShow:false
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init(){

			},
			// 向父组件发送更新value事件
			_updateValue(value){
				this.$emit("input",value);
				this.$emit("update:modelValue", value);
				this.$emit("change",value);
			},
			onInput(value){
				let that = this;
				that.isShow = value;
				that.$emit("update:show",value);
			},
			// 监听 - 值改变事件
			_change(index){
				let that = this;
				let value = that.localdata[index][that.props.value];
				that._updateValue(value);
			},
			open(){
				let that = this;
				if(!that.disabled){
					that.isShow = true;
				}
			},
			_confirm(e){
				let that = this;
				let value = e[0][that.props.value];
				that._updateValue(value);
			}
		},
		watch: {
			show:{
				immediate:true,
				handler(newVal){
					if (this.isShow !== newVal) {
						this.$nextTick(()=>{
							this.isShow = newVal;
						});
					}
				}
			}
		},
		// 计算属性
		computed: {
			valueCom(){
				// #ifndef VUE3
				return this.value;
				// #endif

				// #ifdef VUE3
				return this.modelValue;
				// #endif
			},
			textCom(){
				let that = this;
				let { valueCom:value, localdata, vk } = that;
				let str = "";
				if(typeof value !== "undefined"){
					let item = localdata.find((v)=>{
						return v[that.props.value] === value;
					});
					//let item = vk.pubfn.getListItem(localdata,that.props.value,value);
					if(item){
						str = item[that.props.label];
					}
				}
				return str;
			},
			defaultValueCom(){
				let that = this;
				let { valueCom:value, localdata, vk } = that;
				let arr = [];
				if(typeof value !== "undefined"){
					let index = localdata.findIndex((v)=>{
						return v[that.props.value] === value;
					});
					if(index > -1){
						arr[0] = index;
					}
				}
				return arr;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.vk-data-input-select {
		position: relative;
		-webkit-box-flex: 1;
		padding: 0px;
		border-color: rgb(220, 223, 230);
		text-align: left;
		width: 100%;
	}
</style>
